<template>
    <div id="codeBuilder" class="code_builder_container">
        <div class="code_builder_box">

            <el-form :model="codeBuilderForm" :rules="codeBuilderRules" ref="codeBuilderForm" label-width="100px" class="code_builder_Form">

                <el-form-item label="作者" prop="author">
                    <el-input v-model="codeBuilderForm.author"></el-input>
                </el-form-item>

                <el-form-item label="表名" prop="tableName">
                    <el-input v-model="codeBuilderForm.tableName"></el-input>
                </el-form-item>

                <!--按钮-->
                <el-form-item class="btns">
                    <el-button type="primary" @click="submit">立即创建</el-button>
                    <el-button type="info" @click="reset">重置</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CodeBuilder",
        data(){
            return{
                codeBuilderRules:{
                    author: [
                        { required: true, message: '请输入作者', trigger: 'blur' }
                    ],
                    tableName: [
                        { required: true, message: '请输入表名', trigger: 'blur' }
                    ]
                },
                codeBuilderForm: {
                    author: null,
                    tableName: null
                }
            }
        },
        methods: {
            reset(){
                /*重置表单*/
                this.$refs.codeBuilderForm.resetFields();
            }
            ,
            submit(){
                this.$refs.codeBuilderForm.validate(async valid => {
                    const resp = await this.$http.post('/admin/codeBuilder',this.codeBuilderForm);
                    const data = resp.data;
                    this.$message({
                        showClose: true,
                        message: data.info,
                        type: data.code===200?'success':'error'
                    })
                })

            }
        }

    }
</script>

<style lang="less" scoped>
    .code_builder_container {
        background-color: #81ccdf;
        height: 100%;
    }
    .code_builder_box {
        width: 600px;
        height: 500px;
        background-color: white;
        border-radius: 5px;
        position: absolute;
        left: 50%;
        right: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        .code_builder_Form {
            position: absolute;
            bottom: 0;
            width: 100%;
            left: 50%;
            right: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            padding: 40px 40px;
            box-sizing: border-box;
        }
    }

</style>
